<template>
  <view class="container">
    <!-- 商店信息 -->
    <view class="shop-details">
      <text class="shop-name">{{ shop.shopName }}</text>
      <text class="shop-description">{{ shop.description }}</text>
      <text class="shop-phone">电话: {{ shop.phone }}</text>
      <text class="shop-address">地址: {{ shop.address }}</text>
    </view>

     <text class="goods">全部宝贝</text>
	 
    <!-- 商店所有商品 -->
    <view class="goods-list">
      <view v-for="goods in goodsList" :key="goods.goodsId" class="goods-item">
        <image :src="goods.images" mode="aspectFill" class="goods-image"></image>
        <text class="goods-name">{{ goods.goodsName }}</text>
        <text class="goods-price">¥ {{ goods.price }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import config from '@/config'; // 确保正确引入 config

export default {
  data() {
    return {
      shop: {}, // 初始化商店对象
      goodsList: [], // 初始化商品列表
      shopId: null
    };
  },
  onLoad(options) {
    this.shopId = options.shopId; // 获取传递过来的商店ID
    this.fetchShopDetails();
    this.fetchGoodsByShop();
  },
  methods: {
    fetchShopDetails() { 
      uni.request({
        url: `${config.apiUrl}/shop/details/${this.shopId}`,
        method: 'GET',
        success: (response) => {
          this.shop = response.data;
        },
        fail: (error) => {
          console.error('Error fetching shop details:', error);
        }
      });
    },
    fetchGoodsByShop() {
      uni.request({
        url: `${config.apiUrl}/shop/${this.shopId}/goods`,
        method: 'GET',
        success: (response) => {
          this.goodsList = response.data;
        },
        fail: (error) => {
          console.error('Error fetching goods by shop:', error);
        }
      });
    }
  }
};
</script>

<style scoped>
/* 样式代码 */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
  background-color: #ffefba;
}

.shop-details {
  width: 95%;
  padding: 20rpx;
  background-color: #EACD6F;
  border-radius: 40rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 20rpx;
}

.shop-name {
  font-size: 50rpx;
  padding: 15rpx; 
  display: block; /* 每个商品信息占据一行 */
  
}

.shop-description, .shop-phone, .shop-address {
  font-size: 36rpx;
  margin-bottom: 10rpx;
  display: block; /* 每个商品信息占据一行 */
  background-color: antiquewhite;
  border-radius: 40rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  padding: 20rpx;
}

.goods{
	font-size: 45rpx;
	margin-bottom: 10rpx;
	background-color: antiquewhite;
	border-radius: 40rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	padding: 20rpx;
}
.goods-list {
  width: 95%;
}

.goods-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 40rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.goods-image {
  width: 100%;
  height: 50vh;
}

.goods-name, .goods-price {
  font-size: 36rpx;
  margin-top: 10rpx;
}
</style>
